<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>动画</title>
		<style>
			.box{
				width: 300px;
				height: 500px;
				border: 4px solid green;
				/* step2: 绑定动画
				animation：动画名称 持续时间 次数
				infinite：无限的
				liner：匀速
				*/
				animation: sf 4  s infinite linear;
			}
			/* step1:创建关键帧 */
			@keyframes sf{
				from{		/* 开始帧 */
					width: 300px;
					height: 300px;
					background-color: thistle;
					transform: rotate(0deg);
				}
				 to{			/* 结束帧 */
					width: 1200px;
					height: 500px;
					background-color: aqua;
					transform: translate(200px,300px) rotate(180deg);
				} 
				
				0%{
					width: 300px;
					height: 300px;
					background-color: pink;
					transform: rotate(0);
				}
				30%{
					width: 1200px;
					height: 500px;
					background-color: aqua;
					transform: translate(200px,300px) rotate(180deg);
				}
				60%{
					width: 400px;
					height: 400px;
					background-color: burlywood;
					transform: rotate(240deg);
					border-radius: 200px;
				}
				100%{
					background-color: blue;
					border-radius: 50px;
				}
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>
